<template>
    <div class="footer">
        <span @click="$emit('deleteSelectedGood')">删除所选商品</span>
        <div>
            <span>{{ selectedTotalNumber }}</span>
            <span>件商品总计（不含运费）</span>
        </div>

        <span>
            <span>¥</span>
            <span>{{ selectedTotalPrice }}</span>
        </span>
    </div>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps(['goods'])

const selectedTotalNumber = computed(() => {
    // getter函数
    // // 方式1：
    // return props.goods.reduce((result, good) => {
    //     if (good.isCheck) {
    //         result += 1
    //         return result
    //     }
    //     return result
    // }, 0)


    // 方式2：
    return props.goods.filter(good => good.isCheck).length
})

const selectedTotalPrice = computed(() => {
    return props.goods.reduce((result, good) => {
        if (good.isCheck) {
            result += (good.number * good.price)
            return result
        }
        return result
    }, 0)

})



</script>

<style>
.footer {
    display: flex;
    justify-content: space-between;
    padding: 4px;
}
</style>
